<template>
  <div id="balanceLogDialog" class="overflow-hidden">
    <van-dialog
      :confirm-button-text="$mt('Close')"
      confirmButtonColor="#EB414E"
      v-model:show="showBalanceLog"
      :width="$isPcScreen() ? '560' : '350'">
      <div class="px-2 max-h-[400px] overflow-y-auto lg:max-h-[450px] text-center reactive">
        <div class="flex px-2 items-center text-sm font-medium bg-[#1c1c1e] fixed top-0 left-0 right-0 h-16">
          <div class="w-3/12">{{ $mt('Change time') }}</div>
          <div class="w-3/12">{{ $mt('Reason for change') }}</div>
          <div class="w-3/12">{{ $mt('Change amount') }}</div>
          <div class="w-3/12">{{ $mt('New balance') }}</div>
        </div>
        <div class="mt-[80px]">
          <div v-if="balanceLogInfo.data?.length">
            <div v-for="item in balanceLogInfo.data" class="cursor-pointer mb-6">
              <!-- <van-popover>
                <div class="text-xs lg:text-sm p-1 bg-[#fff] text-[#adaaaa] cursor-pointer">
                  {{ $mt('orderId') }}:
                  <span @click="copy(item.orderId)">{{ item.orderId }}</span>
                </div>
                <template #reference> -->
              <div class="w-full h-8 flex items-center text-xs lg:text-sm text-[#adaaaa]">
                <div class="w-3/12">{{ item.createdAt }}</div>
                <div class="w-3/12">{{ item.reason }}</div>
                <div
                  class="w-3/12"
                  :class="{ 'text-red1': item.type === 'DECREASE', 'text-[#23b347]': item.type === 'INCREASE' }">
                  {{ item.type === 'DECREASE' ? '-' : '+' }} {{ $calcPrice(item.amountUSD) }}
                </div>
                <div class="w-3/12 font-semibold">
                  {{
                    item.type === 'DECREASE' ? $calcPrice(item.balanceAfterChange) : $calcPrice(item.balanceAfterChange)
                  }}
                </div>
              </div>
              <!-- </template>
              </van-popover> -->
            </div>
          </div>
          <!-- <van-skeleton class="mb-2" v-else title :row="3" /> -->
          <van-empty v-else image-size="60" image="/v2/home-imgs/empty2.png" :description="$mt('nothing here')" />
        </div>
      </div>
      <!-- 分页 -->
      <div class="px-5 mt-4 lg:w-[300px] lg:mx-auto" v-if="balanceLogInfo.data?.length">
        <van-pagination
          mode="simple"
          prev-text="<"
          next-text=">"
          @change="handlePageChange"
          v-model="balanceLogInfo.pageNum"
          :total-items="balanceLogInfo.totalElements"
          :items-per-page="balanceLogInfo.pageSize" />
      </div>
    </van-dialog>
  </div>
</template>
<script setup lang="ts">
import { useClipboard } from '@vueuse/core'
import { showLoadingToast } from 'vant'

const { $mt } = useCommonPlugin()
const { copy, copied } = useClipboard()
const { $isPcScreen } = useCommonPlugin()
const showBalanceLog = defineModel()
const { requestGetNew } = useRequest()
const balanceLogInfo = ref({})
// 页面改变
const handlePageChange = async () => {
  await initBalanceLog(balanceLogInfo.value.pageNum, 10)
}
const initBalanceLog = async (page, size) => {
  const loadingToast = showLoadingToast({
    forbidClick: true,
  })
  const res = await requestGetNew(`/app/user/balanceRecord/${page}/${size}`, {}, { withAuth: true })
  loadingToast.close()
  balanceLogInfo.value = res
}
watch(copied, (val) => {
  if (val) showToast($mt('copied'))
})
onBeforeMount(() => {
  initBalanceLog(1, 10)
})
</script>
<style lang="scss">
.van-popover--light .van-popover__arrow {
  color: #fff !important;
}

.van-popup.van-popover.van-popover--light {
  z-index: 2006 !important;
}
</style>
<style scoped lang="scss">
#balanceLogDialog {
  --van-border-width: 0px;

  :deep(.van-popover__wrapper) {
    width: 100%;
  }

  :deep(.van-pagination__item) {
    color: #fff;
    background: #35393b;
    border: 0;
    border-radius: 12px;
  }

  :deep(.van-pagination__items) {
    display: flex;
  }

  :deep(.van-pagination__item) {
    flex: unset;
    min-width: 70px;
    height: 100%;
  }

  :deep(.van-pagination__items) {
    height: 30px !important;
    align-items: center;
  }
}
</style>
